VS Code Extension สุดปังที่ทุกคนต้องลอง

VS Code Extension น่าสนใจที่เหล่านักพัฒนาไม่ควรพลาด ซึ่งจะช่วยให้การทำงานของคุณง่ายขึ้น อีกทั้งยังช่วยลดเวลาในการทำงานของคุณได้อีกด้วย

#Classmethod Thailand

#Thai Language

#VSCode（Visual Studio Code）

Pisha Mangkalakere

2021.08.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

สวัสดีค่ะทุกคน วันนี้พิชชาอยากจะมาแชร์ Extension ที่ใช้ในโปรแกรม VS Code หรือ Visual Studio Code ให้ทุกคนได้อ่านกันค่ะ ซึ่งส่วนตัวได้ลองใช้งานมาซักพักแล้วคิดว่าน่าสนใจและมีประโยชน์มาก เลยอยากให้ทุกคนได้ลองใช้ตามกันบ้างค่ะ

Prettier Formatter

Extension นี้จะช่วยทำให้การเขียนโค้ดนั้นง่ายมากขึ้น โดยทำให้ Format โค้ดนั้นสวยและอ่านง่ายสบายตา วิธีใช้งานก็ง่ายนิดเดียว เราเพียง Save ไฟล์ของเราเท่านั้น จากนั้นมันก็จะ Format โค้ดของเราให้เลยอัตโนมัติ หรืออีกทางเลือกหนึ่งก็คือให้ Format หลังจากการ Paste ก็ได้ และไม่ต้องห่วงเรื่อง Format ที่เราอาจจะไม่ถูกใจ เพราะเราสามารถตั้งค่ารูปแบบ Format ได้เองเช่นกัน

Download Link: Prettier - Code formatter

Live Server Extension

Extension ที่จำลอง Server เพื่อแสดงผลลัพธ์ของโค้ดที่เรากำลังเขียนอยู่บนหน้าเว็บ Browser และเมื่อไรก็ตามที่เรากด Save ไฟล์ หน้าเว็บ Browser ก็จะอัพเดทให้เลยโดยอัตโนมัติ ซึ่งช่วยลดเวลาในการที่เราจะต้องไป Refresh เองทุกครั้งเพื่อดูผลลัพธ์บนหน้าเว็บ Browser โดยไฟล์ที่จะสามารถใช้งานกับ Live Server ได้ก็ต้องเป็นไฟล์ HTML

Download Link: Live Server

VS Code Icons

VS Code Icons นี้ก็เป็นหนึ่งใน Extension ที่น่าสนใจมาก เพราะจะทำให้ไอคอนของไฟล์เรานั้นตรงกับ Framework หรือ Library ที่เรากำลังใช้งานอยู่

Download Link: vscode-icons

Bracket Pair Colorizer

Extension นี้จะช่วยแก้ไขปัญหาของวงเล็บที่อาจทำให้หลายคนสับสน โดยการกำหนดสีให้กับวงเล็บแบบต่าง ๆ เช่น ( ), { }, [ ] ซึ่งจะช่วยให้เราสามารถแยกแยะส่วนต่าง ๆ ของโค้ดได้ง่ายมากยิ่งขึ้น

Download Link: Bracket Pair Colorizer

Convert Pixels to Rem

ในบางครั้งที่เราต้องการเปลี่ยนหน่วยจาก rem ไปเป็น pixels เราก็ต้องมาทำการคำนวณเพื่อเปลี่ยนหน่วยด้วยตนเอง แต่ด้วย Extension นี้ เราไม่ต้องทำอะไรเลย เพียงแค่กดปุ่ม alt + z ค้างไว้เท่านั้น Extension นี้ก็จะช่วยแปลงค่าทั้งหมดให้เราโดยอัตโนมัติ ซึ่งสะดวกมาก

Download Link: px to rem & rpx (cssrem)

Auto Rename Tag

Extension นี้จะช่วยให้เราสามารถเปลี่ยนชื่อ Tag ที่หัวและท้ายไฟล์ได้พร้อมกันทีเดียว นั่นหมายความว่าเวลาที่เราเลือกที่จะแก้ไข Tag ไม่ว่าจะเป็น Tag ที่หัวหรือท้ายไฟล์ เราไม่จำเป็นที่จะต้องแก้ไข Tag ทั้งสองตำแหน่งอีกต่อไป เพราะ Extension นี้จะช่วยแก้ไขทั้งหมดให้เราเองโดยอัตโนมัติ

Download Link: Auto Rename Tag

นี่ก็เป็น Extension จาก VS Code ที่พิชชาคิดว่าน่าสนใจมากเลยทีเดียว เพราะนอกจากจะช่วยให้การทำงานของเรานั้นง่ายขึ้นแล้ว ยังช่วยลดเวลาในการทำงานอีกด้วย พิชชาก็อยากให้ทุกคนลองดาวน์โหลดไปใช้งานกันดูค่ะ หวังว่าทุกคนจะชอบบทความที่พิชชานำมาแชร์ในครั้งนี้นะคะ ยังไงก็ฝากติดตามบทความต่อ ๆ ไปของพิชชาด้วยนะคะ